<template>
  <div class="auth">
    <a-form :form="form" @submit="submit">
      <div class="auth-item">
        <a-input
          size="large"
          :placeholder="$t('user.username')"
          v-decorator="['username', {rules: [{ required: true, message: $t('user.userName.required') }], validateTrigger: 'change'} ]"
        >
          <a-icon slot="prefix" type="user"/>
        </a-input>
      </div>
      <div class="auth-item">
        <a-input-password
          size="large"
          :placeholder="$t('user.password')"
          v-decorator="['password', {rules: [{ required: true, message: $t('user.password.required') }], validateTrigger: 'blur'}]"
        >
          <a-icon slot="prefix" type="lock"/>
        </a-input-password>
      </div>

      <div class="auth-item">
        <a-button size="large" type="primary" class="auth-button">{{ $t('action.login') }}</a-button>
      </div>
    </a-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: this.$form.createForm(this)
    }
  },
  methods: {
    submit (e) {
      e.disable = true
    }
  }
}
</script>
